<html>
<head>
    <title>利用ajax实现用户登录</title>
</head>
<body>
<form id="login-form" >
    用户名: <input type="text" name="username" placeholder="请输入用户名">
    密码: <input type="password" name="password" placeholder="请输入密码">
    <input type="submit" value="登录">
</form>
<div style="color: red" id="error"></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    // 等待Jquery代码加载完成以后，再执行函数里面的代码
    jQuery(function() {
        jQuery('#login-form').submit(function () {
            // ajax方式的提交
            jQuery.post('/lesson04/ajax/ajaxlogin.php', jQuery('#login-form').serialize(), function (data){
                // 能够将服务端传递回的json字符串，转化为JS对象
                if (data.status == 0) {
                    jQuery('#error').html(data.message)
                } else {
                    window.location.href="/lesson04/center.php"
                }
            }, 'json')
            return false // 阻止默认的提交事件
        })
    })
</script>
</html>
<?php
// JQuery框架，JavaScript框架，基于Dom节点的框架，轻松让网页动起来